<template>
	<view class="consult">
		<!-- navbar -->
		<navbar />
		<!-- 背景 -->
		<topBg />
		<view class="consult-main">
			<!-- 输入框 -->
			<view class="consult-input-container">
				<textarea class="textarea" maxlength="500" placeholder="您好，请问您遇到了什么法律问题？请输入您遇到的问题以及想获得的帮助，最快3分钟内有响应"
					placeholderStyle="color:#c0c4cc;" v-model="content">
				</textarea>
				<view class="consult-input-footer-container">
					<view class="image-list-container">
						<u-upload ref="uUpload" :action="action" :file-list="fileList" custom-btn max-count="3"
							@on-success="onSuccess" @on-list-change="onListChange">
							<view slot="addBtn" class="add-btn">
								<i class="iconfont icon-add-consult" style="font-size: 40rpx" />
							</view>
						</u-upload>
					</view>
					<view class="word-count-container">
						{{content.length}}/500
					</view>
				</view>
			</view>
			<!-- 是否匿名咨询 -->
			<!-- 		<view class="anonymous-switch-container">
				<text class="switch-label">匿名咨询</text>
				<u-switch v-model="checked" size="40" active-color="#8bc5f8"></u-switch>
			</view> -->
			<!-- 温馨提示 -->
			<view class="consult-prompt-container">
				<view class="prompt-title">
					温馨提示：
				</view>
				<view class="prompt-list">
					<view class="prompt-item">
						<i class="iconfont icon-service prompt-icon" /> 小律懂法提供全程服务保障，确保服务质量；
					</view>
					<view class="prompt-item">
						<i class="iconfont icon-protect prompt-icon" /> 严格按照隐私保护，绝不向第三方透漏您的信息；
					</view>
					<view class="prompt-item">
						<i class="iconfont icon-refund prompt-icon" /> 不满意退款，提出申请最低1个工作日内原路退还款项。
					</view>
				</view>
			</view>
			<view class="current-lawyer" v-if="lawyerDetailData">
				您当前选择的律师是:<text class="lawyer-name">{{lawyerDetailData.lawyer_name}}</text>
			</view>
		</view>
		<!-- 支付金额 -->
		<view class="bottom-price-bar">
			<view class="price">
				<view class="price-label">
					支付金额：
				</view>
				<view class="price-count">
					{{userInfo?userInfo.vip>0?'会员免支付':`￥${price}`:`￥${price}`}}
				</view>
			</view>
			<u-button class="pay-btn" :disabled="!price" @click="submitOrder">立即下单</u-button>
		</view>
		<!-- tabbar -->
		<payBar ref="payBar" />
		<tabbar />
	</view>
</template>

<script>
	import navbar from "./components/navbar/navbar.vue";
	import topBg from "./components/top-bg/topBg.vue";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			navbar,
			topBg
		},
		onLoad() {
			this.getQuicklyConsultPrice();
		},
		onShow() {
			console.log(this.currentLawyerId)
		},
		data() {
			return {
				checked: false,
				action: 'https://www.gdlzjt.com/api/upload/uploadImagesCos',
				fileList: [],
				price: '',
				content: '',
				lawyerDetailData: null,
				lid: '',
			}
		},
		watch: {
			currentLawyerId: {
				async handler(val) {
					if (!val) {
						return
					} else {
						const {
							data
						} = await this.$u.post(this.$restUrl.getLawyerDetail, {
							lawyer_id: val,
						})
						this.lawyerDetailData = data;
						console.log('this.lawyerDetailData>>>>>>>>>>>>>>>>', this.lawyerDetailData)
					}
				},
				immediate: true,
			}
		},
		methods: {
			async placeOrder() {
				return this.$u.route('/pages/checkstand/checkstand');
				const {
					data
				} = await this.$u.post(this.$restUrl.getWXPayOptions, {
					task_code: `${Math.random()}`.split('.')[1],
					amount: '0.1',
				})
				console.log('获取微信支付参数>>>>>>>>>>>>>>>>>>>>>>>', data)
				const res = await this.$wx.WXPay(data);
				console.log('微信支付回调>>>>>>>>>>>>>>>>', res);
			},
			async getQuicklyConsultPrice() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getQuicklyConsultPrice);
				this.price = data.consult_price;
				this.lid = data.lid;
			},
			onSuccess(data) {
				console.log(data);
			},
			async submitOrder() {
				// return this.toChatDetail();
				let fireList = this.$refs.uUpload.lists;
				if (!this.content.length) {
					return this.$showToast('请输入咨询的问题');
				} else if (this.content.length < 20) {
					return this.$showToast('请输入不少于20字的问题描述')
				} else if (fireList.some(item => item.progress < 100 && !iten.response)) {
					return this.$showToast('有图片正在上传')
				} else if (fireList.some(item => item.response.status_code != 200)) {
					return this.$showToast('图片上传失败,请上传格式为jpg/png/jpeg图片')
				}
				console.log(fireList)

				const pay_type = await this.getPayType();
				console.log('pay_type>>>>>>>>>>>>>>', pay_type)
				// try {
				const {
					data
				} = await this.$u.post(this.$restUrl.submitQuicklyConsultOrder, {
					message: this.content,
					images: fireList.map(item => item.response.data.file_id + '').join(','),
					lid: this.currentLawyerId || this.lid,
					pay_type,
				})
				if (pay_type == 1) {
					const options = {
						taskCode: data.task_code,
						price: data.amount,
						countDown: data.expires_time,
					}
					const res = await this.$refs.payBar.pay(options);
				} else if (pay_type == 2) {
					const res = await this.$u.post(this.$restUrl.getWXPayOptions, {
						task_code: data.task_code,
						amount: data.amount,
					})
					await this.$wx.WXPay({
						...res.data,
						task_code: data.task_code
					});
				}
				console.log('支付成功')
				this.$u.route(`/pages/order_detail/orderDetail?taskCode=${data.task_code}`)
				this.content = '';
				this.$refs.uUpload.lists = [];
				this.fileList = [];
				// } catch (e) {
				// 	if (e.status_code == 405) {
				// 		return this.$u.route(`/pages/order_detail/orderDetail?taskCode=${e.data.task_code.task_code}`)
				// 	}
				// }


			},
			onListChange(list) {
				console.log(list)
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./consult.scss";
</style>
